<template>
  <div>
    <div class="center">
      <div class="hander">李芳的工单</div>
      <div class="cold">
        <!-- 套餐状态 -->
        <div class="orderStatus marginRight">
          <el-date-picker
            v-model="value1"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            @change="timeDate"
          >
          </el-date-picker>
        </div>
        <!-- 套餐类型 -->
        <div class="payMds marginRight">
          <span class="sizeList">工单状态：</span>
          <el-select
            v-model="payMd"
            clearable
            @change="payData"
            placeholder="请选择"
          >
            <el-option
              v-for="item in staffData"
              :key="item.orderCode"
              :label="item.orderName"
              :value="item.orderCode"
            >
            </el-option>
          </el-select>
        </div>
        <div class="userSearch marginRight">
          <el-select
            v-model="userSearch"
            @change="placeList"
            placeholder="请选择"
          >
            <el-option
              v-for="item in staffSearch"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-input v-model="searchValue" placeholder="请输入"></el-input>
          <el-button icon="el-icon-search" @click="staff"></el-button>
        </div>
        <el-button size="medium" @click="dialogFormVisible = true"
          >批量改派</el-button
        >
      </div>
      <div class="tableList">
        <div class="tableListUl">
          <div class="th">
            <span class="serveInformation" style="width: 116px">服务信息</span>
            <!-- <span class="orderMoney">预计可得佣金</span> -->
            <span>服务地址</span>
            <span>服务时间</span>
            <span>工单状态</span>
          </div>
          <div v-for="(item, index) in tableData" :key="index" class="table">
            <div class="listTop">
              <div class="left">
                <div class="orderNo" style="color: #00a0e4; cursor: pointer">
                  <span>订单编号：{{ item.orderNo }}</span>
                </div>

                <div class="orderTime">
                  <span>工单编号：{{ item.workOrderNo }}</span>
                </div>
              </div>

              <div class="right">
                <div
                  style="margin-left: 20px; color: #00a0e4; cursor: pointer"
                  class="details"
                  @click="gotoDetail(item.orderNo)"
                >
                  点击查看详情
                </div>
              </div>
            </div>
            <div class="td">
              <div>
                {{ item.goodsTitle }}
              </div>
              <!-- <div>
                ￥{{ item.serverAddress }}
              </div> -->
              <div>
                {{ item.serverAddress }}
              </div>
              <div>
                {{ item.deliveryTime }}
              </div>
              <div>
                <div style="text-align: center; margin-bottom: 10px">
                  {{ orderStatusOptions[item.workOrderStatus] }}
                </div>

                <el-button style="padding: 10px">转单</el-button>
                <el-button style="padding: 10px">完成</el-button>
              </div>
            </div>
          </div>
        </div>
        <div class="block">
          <div class="left"></div>
          <div class="right">
            <el-pagination
              layout="total, sizes, prev, pager, next, jumper"
              class="page"
              @size-change="sizeChangeHandle"
              @current-change="currentChangeHandle"
              :current-page="pageIndex"
              :page-size="pageSize"
              :total="total"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
const orderStatusOptions = {
  1: "待上门",

  2: "待服务",

  3: "服务中",

  4: "已完成",

  5: "已取消",

  6: "已挂起"

  // 7: "已迟到",

  // 8: "已上门",

  // 9: "已上门",

  // 10: "已服务",
};
export default {
  data() {
    return {
      orderStatusOptions,
      tableData: [],
      userSearch: 0,
      pageIndex: 1,
      pageSize: 5,
      value1: "",
      payMd: "",
      total: 0,
      searchValue: "",
      typeList: 0,
      staffData: [],
      workOrderStatus: "",
      staffSearch: [
        { value: 0, label: "工单编号" },
        { value: 1, label: "订单编号" }
      ]
    };
  },
  activated() {
    this.DetailByPage();
    this.statusList();
  },
  methods: {
    DetailByPage() {
      this.$http({
        url: "staffadmin/homeService/staffWorkOrder/fetchStaffWorkOrderList",
        method: "POST",
        data: {
          endTime: this.endTime,
          orderNo: this.orderNo,

          page: this.pageIndex,
          size: this.pageSize,
          staffCode: "10600001",
          startTime: this.startTime,
          workOrderNo: this.workOrderNo,
          workOrderStatus: this.workOrderStatus
        }
      }).then(res => {
        // //console.log(res);
        this.tableData = res.list;
        this.total = res.total;
      });
    },
    payData(e) {
      this.workOrderStatus = e;
      this.pageIndex = 1;
      this.DetailByPage();
    },
    statusList() {
      this.$http({
        url: "staffadmin/homeService/staffWorkOrder/fetchOrderStatusSelect",
        method: "get",
        data: {}
      }).then(res => {
        // //console.log(res);
        this.staffData = res;
      });
    },
    placeList(e) {
      //console.log(e);
      this.typeList = e;
    },
    staff() {
      if (this.typeList == 0) {
        this.workOrderNo = this.searchValue;
        this.orderNo = "";
      } else {
        this.orderNo = this.searchValue;
        this.workOrderNo = "";
      }
      this.pageIndex = 1;
      this.DetailByPage();
    },
    timeDate(e) {
      //console.log(e);
      if (e) {
        this.startTime = e[0];
        this.endTime = e[1];
      } else {
        this.startTime = "";
        this.endTime = "";
      }
      this.pageIndex = 1;
      this.DetailByPage();
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.DetailByPage();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.DetailByPage();
    }
  }
};
</script>
<style scoped>
.block {
  width: 100%;
  height: 70px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 0 10px 0 10px;
}
.left {
  font-size: 15px;
}
.Useful {
  font-size: 18px;
  margin-bottom: 15px;
}
.cold {
  display: flex;
}
.implement {
  background-color: #f5f5f5;
  padding: 20px;
  margin-top: 80px;
  margin-top: 30px;
  border-radius: 6px;
}
.btn {
  display: flex;
}
.left {
  display: flex;
  flex: 1;
}
.right {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: flex-end;
}
.marginRight {
  display: flex;
  align-items: center;
  margin-right: 10px;
  width: 25%;
  font-size: 13px;
}
.sizeList {
  width: 100px;
}
.tableList {
  background-color: #f5f5f5;
  border-radius: 6px;
  padding: 15px;
  margin-top: 20px;
}
.listTop {
  display: flex;
  background-color: #fff;
  font-size: 14px;
  padding: 10px 20px;
  color: #999;
  border-bottom: 1px solid #000;
  border-radius: 6px 6px 0 0;
}
.tableListUl {
  padding: 20px;
  border-radius: 6px;
}
.orderTime {
  margin-left: 20px;
}
.th {
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  padding: 20px 10px;
  border-radius: 6px;
}
.table {
}
.td {
  background-color: #fff;
  padding: 25px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  border-radius: 0 0 6px 6px;
  font-size: 14px;
}
</style>
